<!--test.vue-->
<template>
<div class='vueVideoPlayer'>
  <!-- <video-player @click="handleMouseDown" class="video-player vjs-custom-skin" ref="videoPlayer" :playsline="true" :options="playerOptions">
		your browser does not support the video tag
	</video-player> -->
	<video width="100%" height="100%" autoplay loop>
		<source :src="src" type="video/mp4">
		您的浏览器不支持Video标签。
	</video>
	</div>
</template>

<script>
	export default {
		name: 'WhVideo', // 这个名字很重要，它就是未来的标签名
		props: {
			src: {
				type: String,
        default: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm'
      },
			cover_url: {
				type: String,
				default: 'https://dss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1977637687.png'
			}
		},
		watch: {
			src(val) {
				this.playerOptions.sources[0].src = val
				this.replay(val)
			},
			cover_url(val) {
				this.playerOptions.poster = val
			},

		},
    data(){
			return {
				playerOptions: {
					playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
					autoplay: true, // 如果true,浏览器准备好时开始回放。
					muted: false, // 默认情况下将会消除任何音频。
					loop: true, // 导致视频一结束就重新开始。
					preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{
						type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
						src: this.src // url地址
					}],
					poster: this.cover_url, // 你的封面地址
					notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
					controlBar: {
						timeDivider: false,
						durationDisplay: false,
						remainingTimeDisplay: false,
						fullscreenToggle: false // 全屏按钮
					}
      	}
      }
    },
		methods: {
			replay(src){
				this.$refs.videoPlayer.player.src(src) // 重置进度条
			},
			handleMouseDown(e) {
				e.stopPropagation()
				console.log(e)
				return
			}
		}
	}
</script>

<style lang="scss" scoped>
.video-js {
	.vjs-control-bar {
		display: none;
	}
	/deep/.vjs-icon-placeholder {
    width: 100%;
    height: 100%;
    display: block;
	}
}

.vueVideoPlayer:hover{
    display: block;
  }
</style>
